<%@ page pageEncoding="UTF-8"%>
<script type="text/x-template" id="sure_info">
    <div class="_sure-info">
        <div class="_pop-container">
            <div class="_top">
                确认信息
            </div>
            <div class="_content">
                <div class="_sure-tip">请按照我们提供的字段匹配您的信息</div>
                <div class="_sure-each">
                    <div class="_sure-origin">
                        应发工资
                    </div>
                    <div class="_sure-to">
                        -->
                    </div>
                    <div class="_sure-end">
                        <singleselect :list="workList" :choosed="shouldCost" value="shouldCost" editable="false"></singleselect>
                    </div>
                    <div class="_sure-no-match" v-show="!shouldCost">
                        暂无匹配项
                    </div>
                </div>
                <div class="_sure-each">
                    <div class="_sure-origin">
                        扣款合计
                    </div>
                    <div class="_sure-to">
                        -->
                    </div>
                    <div class="_sure-end">
                        <singleselect :list="workList" :choosed="deleteCost" value="deleteCost" editable="false"></singleselect>
                    </div>
                    <div class="_sure-no-match" v-show="!deleteCost">
                        暂无匹配项
                    </div>
                </div>
                <div class="_sure-each">
                    <div class="_sure-origin">
                        实发工资
                    </div>
                    <div class="_sure-to">
                        -->
                    </div>
                    <div class="_sure-end">
                        <singleselect :list="workList" :choosed="actualCost" value="actualCost" editable="false"></singleselect>
                    </div>
                    <div class="_sure-no-match" v-show="!actualCost">
                        暂无匹配项
                    </div>
                </div>
                <div class="_submit-container">
                    <div class="_submit _btn" @click="submit()">确定</div>
                </div>
            </div>
            <img class="_close" src="/images/components/add_member/ic-close.png" alt="" @click="close()">
        </div>
    </div>
</script>
<script>
    var sureInfo = {
        template: "#sure_info",
        props: ["uri"],
        data: function() {
            return {
                workList: [],
                shouldCost: "",
                deleteCost: "",
                actualCost: "",
                names: "应发合计, 扣款合计, 实发工资",
            }
        },
        computed: {
            indexs: function() {
                return this.workList.indexOf(this.shouldCost) + "," + this.workList.indexOf(this.deleteCost) + "," + this.workList.indexOf(this.actualCost);
            }
        },
        methods: {
            close: function() {
                this.$dispatch("closeSureInfo");
            },
            submit: function() {
                var _this = this;
                if (!this.shouldCost || !this.deleteCost || !this.actualCost) {
                    _this.$dispatch("danger", "未全部选中");
                    return;
                }
                $.ajax({
                    type: 'POST',
                    url: location.href,
                    data: {
                        act: "salaryExcel",
                        hospital: HOSPITAL,
                        urlFileName: this.uri.url,
                        date: this.uri.date,
                        names: this.names,
                        indexs: this.indexs,
                    },
                    success: function(res) {
                        res = JSON.parse(res);
                        if (res.errcode == 0) {
                            _this.$dispatch("message", "上传成功");
                            _this.$dispatch("closeSureInfo");
                        } else {
                            _this.$dispatch("danger", res.errmsg);
                        }
                    },
                });
            }
        },
        events: {
            selectedChange: function(data) {
                this[data.type] = data.selected;
            }
        },
        ready: function() {
            this.workList = this.uri.list;
            this.shouldCost = this.workList.filter(function(item) {
                return /应发/.test(item);
            })[0];
            this.deleteCost = this.workList.filter(function(item) {
                return /扣款/.test(item);
            })[0];
            this.actualCost = this.workList.filter(function(item) {
                return /实发/.test(item);
            })[0];
        },
        components: {
            singleselect: singleselect,
        }
    }
</script>
<style>
    ._sure-info {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 10;
        font-size: 16px;
    }
    ._sure-info ._pop-container {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin: auto;
        width: 550px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    ._sure-info ._top {
        background: #e6eaf5;
        color: #333;
        line-height: 80px;
        font-size: 20px;
        text-align: center;
    }
    ._sure-info ._content {
        padding: 40px;
        background: #fff;
    }
    ._sure-info ._submit-container {
        margin-top: 40px;
        text-align: center;
    }
    ._sure-info ._btn {
        display: inline-block;
        border-radius: 4px;
        padding: 8px 20px;
        box-sizing: border-box;
    }
    ._sure-info ._submit {
        margin-right: 12px;
        color: #fff;
        background-color: #3f8dfa;
    }
    ._sure-info ._cancel {
        color: #333;
        background: #fff;
        border: 1px solid #ccc;
    }
    ._sure-info ._upload-btn {
        display: inline-block;
        background: #ddd;
        text-align: center;
        line-height: 40px;
        width: 120px;
        color: #666;
        font-size: 18px;
        vertical-align: middle;
    }
    ._sure-info ._close {
        position: absolute;
        width: 30px;
        height: 30px;
        right: -15px;
        top: -15px;
        cursor: pointer;
    }
    ._sure-info ._sure-tip {
        font-size: 16px;
    }
    ._sure-info ._sure-each {
        margin: 12px 0;
    }
    ._sure-info ._sure-origin {
        display: inline-block;
        border: 1px solid #ccc;
        vertical-align: middle;
        width: 120px;
        padding: 6px 0 10px 30px;
        box-sizing: border-box;
        color: #999;
    }

    ._sure-info ._sure-to {
        display: inline-block;
        vertical-align: middle;
    }
    ._sure-info ._sure-end {
        display: inline-block;
        width: 200px;
    }
    ._sure-info ._sure-end .select-option {
        line-height: 40px;
    }
    ._sure-info ._sure-no-match {
        display: inline-block;
        color: red;
        vertical-align: middle;
    }
    ._sure-info input:focus {
        outline: 0;
    }
</style>
